<!--播放器的整体结构 -->
<template>
  <div class="play-warp">
    <Minplayer
      v-if="!fullScreen"
      :progress="progress"
      @change="handleProgressChangeAction"
      :currentTime="currentTime"
      :duration="duration"
      @mouseChange="handleMouseChangeAction"
    />
    <Nomalplay
      v-if="fullScreen"
      :progress="progress"
      @change="handleProgressChangeAction"
      :currentTime="currentTime"
      :duration="duration"
      @mouseChange="handleMouseChangeAction"
    />
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${currentID}.mp3`"
    />
  </div>
</template>

<script>
import Minplayer from "./Minplayer.vue";
import Nomalplay from "./Nomalplay.vue";
import { mapState, mapGetters } from "vuex";
export default {
  name: "Player",
  components: {
    Minplayer,
    Nomalplay,
  },
  data() {
    return {
      //audio当前的时间
      currentTime: 0,
      //audio总的时间
      duration: 0,
      isMouse: false,
    };
  },
  computed: {
    ...mapState("song", [
      "currentID",
      "isplay",
      "fullScreen",
      "mode",
      "currentSong",
    ]),
    ...mapGetters("song", ["playList"]),
    //计算进度的百分比
    progress() {
      const result = this.currentTime / this.duration;
      return isNaN(result) ? 0 : result;
    },
  },
  watch: {
    //监听播放状态,操作audio标签进行播放暂停
    isplay(newvalue) {
      this.$nextTick(() => {
        // console.log(newvalue, oldvalue, this.audio.src);
        if (newvalue) {
          //isplay等于true 播放音乐
          this.audio.play();
        } else {
          //isplay等于false 暂停音乐
          this.audio.pause();
        }
      });
    },
    currentID(newv, oldv) {
      if (!oldv) {
        return;
      }
      if (newv) {
        this.$nextTick(() => {
          this.audio.load();
          this.audio.play();
        });
      }
    },
  },
  methods: {
    //处理内部组件进度
    handleProgressChangeAction(newvalue) {
      //修改进度不是真的修改p'rogress而是去修改currentTime属性
      this.currentTime = newvalue * this.duration; //进度百分比*总时长就是 =当前时间
    },
    //全屏播放器拖拽状态切换事件  --up点击结束  --down点击开始
    handleMouseChangeAction(value) {
      if (value === "down") {
        this.isMouse = true;
      } else if (value === "up") {
        this.isMouse = false;
        //触摸停止 调整音乐播放时间
        this.audio.currentTime = this.currentTime;
      }
    },
  },
  mounted() {
    //组件挂载好dom首次渲染完毕，获得标签设置在this上方便之后访问
    this.audio = this.$refs.audio;

    this.audio.addEventListener("canplay", () => {
      //可以播放时候，获得音乐时长
      this.duration = this.audio.duration;
    });

    this.audio.addEventListener("timeupdate", () => {
      //可以播放时候，获得音乐时长
      if (this.isMouse) {
        return; //用户在拖拽 不更新进度 而是结束后在更新
      }
      this.currentTime = this.audio.currentTime;
    });

    //监听播放结束的事件
    this.audio.addEventListener("ended", () => {
      //mode=0   --播放下一首
      //mode=1   --重新播放
      //mode=2   --随机播放

      if (this.mode === 1) {
        let nowID = this.currentSong.id; //寻找当前播放歌曲的ID
        let nowIndex = this.playList.findIndex((item) => item.id == nowID); //更具当前播放歌曲的ID寻找index值 -1 就是下一曲歌曲的索引位置
        let perList = this.playList[nowIndex]; //找到下一曲信息
        let perID = this.playList[nowIndex].id; //找到下一曲ID
        this.$store.dispatch({
          type: "song/getSongLyric",
          id: perID,
        });
        this.$store.commit({
          type: "song/SELECTSONGBYID",
          id: perID,
          list: perList,
        });
        this.audio.play();
      } else if (this.mode !== 1) {
        let nowID = this.currentSong.id; //寻找当前播放歌曲的ID
        let nowIndex = this.playList.findIndex((item) => item.id == nowID) + 1; //更具当前播放歌曲的ID寻找index值 -1 就是下一曲歌曲的索引位置
        let perList = this.playList[nowIndex]; //找到下一曲信息
        let perID = this.playList[nowIndex].id; //找到下一曲ID
        this.$store.dispatch({
          type: "song/getSongLyric",
          id: perID,
        });
        this.$store.commit({
          type: "song/SELECTSONGBYID",
          id: perID,
          list: perList,
        });
      }
    });
  },
};
</script>

<style>
</style>